<template>
    <div class="container">
        <div class="title">
            <img src="@/assets/icon_close.png" @click="closeClick" alt="">
            <span>这是标题</span>
        </div>

        <div class="pro-info">
            <img class="img" v-if="data.goods_images" :src="data.goods_images[0].external_url" alt="">
            <div>
                <div class="price">
                    <span class="pre">¥</span>
                    <span>{{ data.goods_price_min }}</span>
                </div>
                <div class="store-count">库存{{ data.stock_total }}</div>
            </div>

        </div>

        <div class="bug-count">
            <span>数量</span>
            <CountComp v-model="addCount"> </CountComp>
        </div>

        <div class="bottton-btn" :class="type == 0 ? 'add-cart' : 'buy-now'" @click="addClick">{{ type == 0 ? '加入购物车' :
            '立即购买' }}</div>

    </div>
</template>

<script>
import store from '@/store';
import CountComp from './CountComp.vue';
import { addCartNetwork } from '@/api';

export default {

    data() {
        return {

            addCount: 1
        }
    },

    props: {
        data: {
        },
        type: {
            default: 0,
            type: Number
        }
    },
    components: {
        CountComp
    },
    methods: {
        closeClick() {
            this.$emit('closeBox')
        },
        async addClick() {
            // 加入购物车和立即购买, 都需要登录
            const isLogin = this.$store.getters.isLogin

            if (!isLogin) {
                // 弹框提示
                this.$dialog.confirm({
                    title: '提示',
                    message: '当前未登录, 请前往登录',
                })
                    .then(() => {
                        console.log('--------- denglu 11111111----------')
                        // 跳转登录页
                        this.$router.push({path:'/login', query:{goback: true}})
                    })
                    .catch(()=>{

                    })
            } else {

                // 加入购物车逻辑
                const obj = {
                    'goodsId' : this.data.goods_id,
                    'goodsNum' : this.addCount,
                    'goodsSkuId' : this.data.skuList[0].goods_sku_id
                }
                
                console.log(obj)
                const resp = await addCartNetwork(obj)

                this.$toast('加入购物车成功!')

                console.log(resp)

                // 传值商品在购物车总数给详情页
                const cartTotal = resp.data.cartTotal


                this.$emit('getCartCount', cartTotal)


                // 关闭弹框
                this.closeClick()

            }
        }
    }
}
</script>

<style lang="less" scoped>
.container {

    .title {

        padding-top: 10px;
        text-align: center;
        width: 100%;

        img {
            position: absolute;
            right: 25px;
            width: 20px;
            height: 20px;
        }

    }

    .pro-info {
        display: flex;
        flex-direction: row;
        margin: 10px;

        .img {
            width: 50px;
            aspect-ratio: 1;
            margin-right: 10px;

        }

        .price {
            color: orange;
            font-size: 15px;
            row-gap: 5px;

            .pre {
                font-size: 11px;
            }
        }

        .store-count {
            margin-top: 10px;
            font-size: 13px;
            color: #202020;
        }


    }

    .bug-count {
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }


    .bottton-btn {
        color: white;
        margin: 10px 25px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        font-size: 15px;
    }

    .add-cart {
        background-color: orange;
    }

    .buy-now {
        background-color: orangered;
    }


}
</style>